<template>
    <div class="admire-popup">
        <van-overlay @click.self="close" :show="admireShow" style="z-index:201">
            <transition name="van-slide-up" mode="out-in">
                <div v-if="show" class="diy-popup" :style="{height:height}">
                    <div class="admire">
                        <div class="title">تارتۇقلاش</div>
                        <span class="notice">تارتۇقلاش سوممىسىنى تاللاڭ ياكى كىرگۈزۈڭ</span>
                        <div class="price">
                            <span class="yuan" @click="changeAdmire(item,index)" :class="{active:activePrice==index}" v-for="(item, index) in priceList" :key="index">{{item.label}}</span>
                        </div>
                        <div class="notice2">ڧىلىم يارىغان بولسا بىزنى قوللاپ قويۇڭ، سىزنىڭ قوللىشڭىز بىز ئۈچۈن ئەڭ چوڭ مەدەت</div>
                        <div class="inp">
                            <input v-model="currMoney" @input="handleInput" placeholder="تارتۇقلاش سوممىسىنى كىرگۈزۈڭ" min="0">
                            <span>يۈەن</span>
                        </div>
                        <div class="submit" @click="order">تارتۇقلاش</div>
                    </div>
                </div>
            </transition>
        </van-overlay>
    </div>
</template>

<script>
import { Toast } from 'vant'
import { $orderNumber } from "@/utils";
export default {
    props: {
        height: {
            type: String,
            default: '0%'
        },
        show: {
            type: Boolean,
            default: false
        },
        info: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            admireShow: false,
            admireInfo: {},
            activePrice: -1,
            currMoney: 0,
            priceList: [
                {
                    label: "1يۈەن",
                    value: 1
                },
                {
                    label: "2يۈەن",
                    value: 2
                },
                {
                    label: "5يۈەن",
                    value: 5
                },
                {
                    label: "10يۈەن",
                    value: 10
                },
                {
                    label: "20يۈەن",
                    value: 20
                },
                {
                    label: "30يۈەن",
                    value: 30
                },
                {
                    label: "50يۈەن",
                    value: 50
                },
                {
                    label: "100يۈەن",
                    value: 100
                }
            ],
        }
    },
    methods: {
        close() {
            this.$emit('close', false)
        },
        changeAdmire(item, index) {
            if (index == this.activePrice) {
                this.activePrice = null;
                this.currMoney = 0;
            } else {
                this.currMoney = this.priceList[index].value;
                this.activePrice = index;
            }
        },
        handleInput() {
            this.activePrice = -1
        },
        order() {
            if (this.currMoney <= 0) {
                Toast('تارتۇقلاش سوممىسىنى تاللاڭ ياكى كىرگۈزۈڭ'); return;
            }
            try {
                let orderId = $orderNumber(),
                    payAmount = Math.round(this.currMoney * 100);
                let opt = {
                    orderId,
                    openId: this.$store.state.userInfo.openid,
                    payAmount,
                    uid: this.$store.state.userInfo.uid
                };
                this.$http
                    .post("/getPaymentInfo", {
                        payInfo: this.$encrypt(JSON.stringify(opt))
                    })
                    .then(res => {
                        let info = JSON.parse(this.$decrypt(res));
                        let { nonceStr, paySign, signType, timeStamp } = info;
                        let self = this;
                        wx.ready(function () {
                            wx.chooseWXPay({
                                timestamp: timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                                nonceStr, // 支付签名随机串，不长于 32 位
                                // package:`prepay_id=${info.package}`,// 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                                package: info.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                                signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                                paySign, // 支付签名
                                success: function (payRes) {
                                    // 支付成功后的回调函数
                                    let setOption = self.$encrypt(
                                        JSON.stringify({
                                            ...opt,
                                            vid: self.info.vid,
                                            payInfo: JSON.stringify(info)
                                        })
                                    );
                                    self.$http
                                        .post("/setAdmire", { payInfo: setOption })
                                        .then(payResult => {
                                            Toast({
                                                message: 'تارتۇقلىغىنىڭىزغا رەھمەت',
                                                duration: 1000
                                            });
                                            self.close();
                                            self.$emit('update')
                                        }).catch(err => {
                                            Toast({
                                                message: 'مەغلۇپ بولدى',
                                                duration: 1000
                                            })
                                        })
                                },
                                cancel: function () {
                                    Toast({ message: "ئەمەلدىن قالدۇرۇلدى", duration: 1000 });
                                },
                                fail: function () {
                                    Toast({ message: "مەغلۇپ بولدى", duration: 1000 });
                                }
                            });
                        });

                    })
            } catch (error) {
                Toast('ئۇچۇردا مەسىلە بار')
            }

        }
    },
    watch: {
        show(val) {
            this.admireShow = val;
        }
    },
}
</script>

<style lang="scss" scoped>
.admire-popup {
    /deep/.van-overlay {
        z-index: 140 !important;
    }
    .diy-popup {
        border-radius: 40px 40px 0 0;
        background: rgba(255, 255, 255, 0.95);
        position: fixed;
        z-index: 140;
        bottom: 0;
        right: 0;
        width: 100%;
        overflow: hidden;
        .admire {
            .title {
                padding: 10px 0;
                text-align: center;
                line-height: 60px;
                border-bottom: 2px solid #eee;
                color: #e44545;
                font-size: 28px;
            }
            .notice,
            .notice2 {
                padding: 20px 0 10px 0;
                display: inline-block;
                line-height: 40px;
                text-align: left;
                margin-left: 20px;
                color: #123;
                font-size: 25px;
            }
            .notice2 {
                font-size: 30px;
                padding: 20px 30px 10px 30px;
                text-align: center;
                line-height: 46px;
            }
            .price {
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
                .yuan {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 25px;
                    height: 50px;
                    width: 20%;
                    margin: 15px 2%;
                    direction: rtl;
                    border-radius: 15px;
                    border: 1px solid #eeecec;
                    color: rgba(0, 0, 0, 0.884);
                }
                .active {
                    background: rgba(41, 45, 62, 8);
                    color: #fafafa;
                }
            }
            .inp {
                padding: 20px 15px 15px 20px;
                border-bottom: 1px solid #eee;
                display: block;
                height: 60px;
                span {
                    display: inline-flex;
                    vertical-align: middle;
                    height: 60px;
                    align-items: center;
                }
            }
            input {
                width: 80%;
                color: #123;
                font-size: 25px;
                float: left;
                padding: 10px 40px;
                box-sizing: border-box;
                margin-left: 30px;
                outline: none;
                background: transparent;
                border: 1px solid #ccc;
                border-radius: 20px;
                ::after {
                    display: block;
                    content: "";
                    clear: both;
                }
                span {
                    width: 15%;
                    font-size: 25px;
                }
            }
            .submit {
                width: 60%;
                margin: 0 auto;
                margin-top: 30px;
                height: 70px;
                text-align: center;
                background: rgba(41, 45, 62, 8);
                color: #fafafa;
                font-size: 28px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 20px;
            }
        }
    }
}
</style>